<template>
  <section class="myteam-list">
    <div class="scroll-box">
      <scroller
        :on-refresh="refresh"
        :on-infinite="infinite"
        :noDataText="$t('no more')"
        ref="myScroller"
      >
        <cell>
          <img slot="icon" :src="myreferees.avatar" alt="img" style="border-radius: 50%">
          <div slot="title" class="user-information">
            <div class="user-name">{{myreferees.nickname}}({{$t('recomender')}})</div>
            <div class="user-data">
              <p>{{$t('re ID')}}:{{myreferees.id}}</p>
              <p>{{$t('user id')}}:{{myId}}</p>
            </div>
          </div>
        </cell>
        <p class="tips">{{$t('third total')}}： {{teamcount.count}}</p>
        <div class="tab-box">
          <tab>
            <tab-item selected @on-item-click="onItemClick">{{$t('push num')}}: {{teamcount.directnum}} </tab-item>
          </tab>
        </div>
        <group class="tab-container">
          <cell v-for="i in list" :key="i.id">
            <img slot="icon" :src="i.avatar" alt="img" style="border-radius: 50%">
            <div slot="title" class="right">
              <div class="top item">
                <p style="font-weight:bold">{{i.nickname}}<img src="../../assets/img/renzheng.png" alt="" v-if="i.realname"></p>
                <p style="color:#537fbf">{{i.is_certification}}</p>
              </div>
              <div class="bottom item">
                <p>{{$t('re name')}}：{{upName}}</p>
                <p>{{$t('user id')}}：{{i.id}}</p>
              </div>
            </div>
          </cell>
          <!--<no-data :nomore=false v-if="showNodata"></no-data>-->
        </group>
      </scroller>
    </div>
  </section>
</template>

<i18n>
  title.myteam:
    en: My Team
    zh-CN: 我的团队
  no more:
    en: No More
    zh-CN: 没有更多数据
  recomender:
    en: Superior
    zh-CN: 推荐人
  re ID:
    en: Superior ID
    zh-CN: 推荐人 ID
  recomender ID:
    en: Superior ID
    zh-CN: 推荐人 ID
  recomender name:
    en: Superior
    zh-CN: 推荐人姓名
  re name:
    en: Superior Name
    zh-CN: 推荐人姓名
  user id:
    en: UserId
    zh-CN: 用户ID
  push num:
    en: Push Number
    zh-CN: 直推人数
  third total:
    en: Team Total
    zh-CN: 团队有效总人数
</i18n>

<script>
  import {Cell, Group, Tab, TabItem} from 'vux'
  import NoData from '../../components/nodata'
  export default {
    name: 'MyTeam',
    components: {
      NoData,
      Cell,
      Group,
      Tab,
      TabItem
    },
    created () {
      this.init()
    },
    data () {
      return {
        list: [],
        myreferees: '',
        teamcount: '',
        myId: '',
        scrollLoading: true, //  是否是在加载中
        page: 1,
        showNodata: false,
        upName: ''
      }
    },
    methods: {
      onItemClick (index) {
        console.log(index)
      },
      infinite (done) {
        if (!this.scrollLoading) {
          this.getInfo(done)
        }
      },
      // 上拉加载
      refresh (done) {
        this.page = 1
        this.list = []
        this.getInfo(done)
      },
      init () {
        this.getInfo()
      },
      getInfo (done) {
        let vue = this
        let url = '/api/usercenter/myteam'
        // 置为加载中
        this.scrollLoading = true
        let show
        this.page === 1 ? show = true : show = false
        vue.post({
          url: url,
          showloading: show,
          params: {
            token: localStorage.token,
            listRows: 8,
            page: vue.page
          },
          success: function (data) {
            if (data.code === 1) {
              vue.upName = data.data.me.name
              if (data.data.myreferees === null) {
                vue.myreferees = data.data.me
              } else {
                vue.myreferees = data.data.myreferees
              }
              vue.myId = data.data.me.id
              vue.teamcount = data.data.teamcount
              // data.data.myteam.data.length === 0 ? vue.showNodata = true : vue.showNodata = false
              if (data.data.myteam.data.length === 0) {
                // 如果没有更多数据在 不能再加载
                vue.scrollLoading = true
                vue.$refs.myScroller.finishInfinite(true)
              } else if (data.data.myteam.data.length === 8) {
                vue.list = vue.list.concat(data.data.myteam.data)
                // 有数据可以继续加载
                vue.scrollLoading = false
                vue.page = vue.page + 1
                vue.$refs.myScroller.finishInfinite(true)
              } else {
                vue.list = vue.list.concat(data.data.myteam.data)
                // 有数据可以继续加载
                vue.scrollLoading = true
                vue.$refs.myScroller.finishInfinite(true)
              }
              done(true)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
    .myteam-list {
      background-color: #fff;
      height: 100%;
      .user-information{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 5.3rem;
        height: 2.6rem;
        font-size: 0.28rem;
        font-weight: bold;
        padding-top: 0.9rem;

        .user-data{
          margin-top: 0.2rem;
          display: flex;
          justify-content: space-between;
          font-size: 0.24rem;
          color: #666666;
          font-weight: normal;
          p{
            text-align: left;
          }
        }

      }
      .tips {
        padding: 15px;
        text-align: center;
        background-color: #fafafa;
      }
      .tab-box　{
        background: #edf2f8;
        /deep/.vux-tab{
          background-color: #edf2f8!important;
          .vux-tab-ink-bar{
            height: 1px!important;
          }
        }

      }
      .vux-tab .vux-tab-item.vux-tab-selected {
        color: #537fbf;
        font-size: 0.28rem;
      }
      .tab-container {
        .right{
          display: flex;
          flex-direction: column;
          width: 5.23rem;
          .item{
            display: flex;
            justify-content: space-between;
            font-size: 0.28rem;
            margin-bottom: 0.1rem;
            img{
              margin-left: 0.2rem;
              width: 0.23rem;
              height:0.23rem;
            }
          }
        }
      }
      .scroll-box {
        height: 100%;
        position: relative;
      }
    }


</style>
